<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>三角彩带</title>
    <style>
        body{
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
        section{
            height: 100%;
            width: 100%;
            overflow: hidden;
            background-image: linear-gradient( rgba(0, 0, 255, 0.5), rgba(255, 255, 0, 0.5));
        }
        .center {
            text-align: center;
            margin: 0 auto;
        }
        .home {
            color: #333333;
        }
        .image-word {
            margin: auto;
            width: 100%;
            height: 300px;
            margin-bottom:calc(100%-800px);
            line-height: 300px;
            text-align: center;
            font-size: 180px;
            font-weight: bold;
            color: transparent;
            background: url("./timg.jfif")
            no-repeat center center;
            background-size: cover;
            -webkit-background-clip: text;
        }
        .home__title {
            user-select: none;
            font-weight: bold;
            font-family: "Times New Roman",Georgia,Serif;
        }  
    </style>
</head>

<body>
    <section class="home center">
        <h2 class="home__title image-word">Hello World</h2>
        <canvas id="canvas"></canvas>
    </section>
    <script>
        document.addEventListener('touchmove', function(e) {
            e.preventDefault() //阻止滚动事件
        })
        var c = document.getElementsByTagName('canvas')[0],
            x = c.getContext('2d'),
            pr = window.devicePixelRatio || 1,
            w = window.innerWidth,
            h = 500,
            f = 90,
            q,
            m = Math,
            r = 0,
            u = m.PI * 2,
            v = m.cos,
            z = m.random
        c.width = w * pr
        c.height = h * pr
        x.scale(pr, pr)
        x.globalAlpha = 0.6

        function i() {
            x.clearRect(0, 0, w, h)
            q = [{
                x: 0,
                y: h * .7 + f
            }, {
                x: 0,
                y: h * .7 - f
            }]
            while (q[1].x < w + f) d(q[0], q[1])
        }

        function d(i, j) {
            x.beginPath()
            x.moveTo(i.x, i.y)
            x.lineTo(j.x, j.y)
            var k = j.x + (z() * 2 - 0.25) * f,
                n = y(j.y)
            x.lineTo(k, n)
            x.closePath()
            r -= u / -50
            x.fillStyle = '#' + (v(r) * 127 + 128 << 16 | v(r + u / 3) * 127 + 128 << 8 | v(r + u / 3 * 2) * 127 + 128).toString(16)
            x.fill()
            q[0] = q[1]
            q[1] = {
                x: k,
                y: n
            }
        }

        function y(p) {
            var t = p + (z() * 2 - 1.1) * f
            return (t > h || t < 0) ? y(p) : t
        }
        document.onclick = i
        document.ontouchstart = i
        i()
    </script>
</body>

</html>